<template>
	<view class="rule1-wrapper">
		<top-nav title="如何加入神灯"></top-nav>
		<view class="time">
			<view class="date">{{info.add_time}}</view>
			<view class="green" @click="updateFun">更新</view>
		</view>
		<view class="content">{{info.content}}</view>
		<view class="handle-wrapper">
			<view class="btn" @click="handelFun(1)">
				<view class="icon icon1"></view>
				<view class="number">{{info.fabulous}}</view>
			</view>
			<view class="btn" @click="handelFun(2)">
				<view class="icon icon2"></view>
				<view class="number">{{info.nofabulous}}</view>
			</view>
		</view>
		<view class="bottom-wrapper">
			<view class="desc">没找到需要的？点一下试试</view>
			<view class="sub-btn">
				<view class="btn" @click="gotoRule()">如何下载</view>
				<view class="btn" @click="gotoPage('/pages/property/property')">首页</view>
				<view class="btn" @click="gotoRule()">如何收钱</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		data(){
			return {
				upNum: 1000,
				downNum: 10,
				id:'',
				info:{}
			}
		},
		components:{
			'topNav':topNav,
		},
		onLoad(options) {
			this.id=options.id
		},
		created() {
			this.getInfo()
		},
		methods:{
			getInfo(){
				this.$u.post('/api/getHelpContent', {id:this.id}).then(res=>{
					if(res.code==200){
						this.info = res.data
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			handelFun(type){
				this.$u.post('/api/fabulous', {id:this.id,type:type,account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
						})
						this.getInfo();
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			async updateFun(){
				await this.getInfo();
				this.$refs.uToast.show({
					title: `更新成功`,
					type: 'success',
				})
			},
			gotoRule(){
				this.$refs.uToast.show({
					title: `我们的目标是没有蛀牙`,
					type: 'success',
				})
			},
			gotoPage(path){
				uni.redirectTo({
				    url: path
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rule1-wrapper{
		padding: 0 26*2rpx;
		.time{
			font-size:14*2rpx;
			display: flex;
			margin-top:50rpx;
			.green{
				color: #69DA73;
				margin-left:20rpx;
			}
		}
		.content{
			text-align: justify;
			margin:34*2rpx 0 40rpx;
		}
		.bottom-wrapper{
			position:fixed;
			bottom:0;
			width:100%;
			height:70*2rpx;
			background-color: #202020;
			text-align:center;
			left:0;
			.desc{
				color:#69DA73;
				font-size:13*2rpx;
				margin-bottom:26rpx;
			}
		}
		.sub-btn{
			display: flex;
			justify-content: space-between;
			padding:0 60*2rpx;
			.btn{
				padding:0 24rpx;
				height:50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 25rpx;
				font-size:12*2rpx;
				background-color: rgba(255,255,255,0.1);
			}
		}
		.handle-wrapper{
			display:flex;
			margin-bottom:140*2rpx;
			.btn{
				display:flex;
				align-items: center;
				.icon{
					width:40rpx;
					height:40rpx;
					background-size: 100% 100%;
					&.icon1{
						background-image: url('/static/rule/icon1.png');
					}
					&.icon2{
						background-image: url('/static/rule/icon2.png');
					}
				}
				.number{
					margin:0 24*2rpx 0 20rpx;
					color:#69DA73;
					opacity: 0.8;
					font-size:14*2rpx;
				}
			}
		}
	}
</style>
